﻿<!DOCTYPE html>

<head>

<title>Texas Hold'Em</title>

<style>

body {font-family:Arial;background-color:lightyellow}

h1 {text-decoration:underline;color:red}
h2 {text-decoration:underline;color:darkred}

p::first-letter {font-size:14pt}

table {border:groove 5px blue;border-radius:10px}
th {text-align:center;border:groove 3px lightblue;border-radius:10px}
td {text-align:center;border:groove 3px cyan;border-radius:10px;width:60px}

td.dealer:hover {font-weight:bold;color:green;background-color:yellow}
td.author:hover {font-weight:bold;color:red;background-color:yellow}

</style>

</head>

<body>

<center><h1>Texas Hold'Em</h1></center>

<h2>Rules</h2>
<p>Each player starts with 2 cards. Further cards are dealt to the community table as the flop (3 cards), the turn (1 cards) and the river (1 card). Winning hands are decided by the best five card hand from the seven cards each player has access to (the players two cards and the five community cards), or if everybody except for the winner folds.</p>
<p>Winning hands are ranked High card, Pair, 2 Pair, 3 Same, Straight, Flush, Full house, 4 Same, Straight Flush, with high cards deciding equal first ranking. Flush is all cards the same suit. Full house is 3 Same+Pair, and is decided by 3 Same.</p>
<p>The Dealer is rotated each hand. Dealer+1 and Dealer+2 (seats clockwise from  the Dealer) donate small and big blinds (compulsory bets). Betting takes place after each dealing, ordered clockwise from Dealer+1. There are four possible bets: check (do nothing), raise (place a bet), call (accept a bet) and fold (give up) If a bet is live, you may only raise, call or fold. Bets go into the pot, the winner wins the contents of the pot. When there are 2 or more equal winning hands the pot is split between the winners.</p>
<h2>Play</h2>
<table>
<tr>
<th>Hand 1</th><th>Hand 2</th><th>Hand 3</th>
<th>Hand 4</th><th>Hand 5</th><th>Hand 6</th>
</tr>
<tr>
<td id="h1">_ _</td><td id="h2">_ _</td><td id="h3">_ _</td>
<td id="h4">_ _</td><td id="h5">_ _</td><td id="h6">_ _</td>
</tr>
</table>
<br>
<table>
<tr>
<th colspan="3">Flop</th>
<th>Turn</th><th>River</th>
</tr>
<tr>
<td id="c1">_</td><td id="c2">_</td><td id="c3">_</td>
<td id="c4">_</td><td id="c5">_</td>
</tr>
</table>
<br>
<table>
<tr>
<td class="dealer" onClick='deal();'>Deal</td>
<td class="dealer" onClick='flop();'>Flop</td>
<td class="dealer" onClick='turn();'>Turn</td>
<td class="dealer" onClick='river();'>River</td>
</tr>
</table>
<hr>
<table>
<tr>
<td class="author" onClick='clearTable();'>Clear</td>
</tr>
</table>

</body>

<script>

// initialization and shuffle functions

init();

function init() {
suit=['♠','♣','♥','♦'];
rank=['A','2','3','4','5','6','7','8','9','X','J','Q','K'];
dekV=new Array(); //visual deck
dekN=new Array(); //numerical deck
for (i=0;i<4;i++)
for (j=0;j<13;j++) {
dekV[i*13+j]=rank[j]+suit[i];
dekN[i*13+j]=i*13+j;
}
clearTable();
}

function shuffle() {
var i;
dekS=new Array(); //shuffled deck 
for (i=0;i<52;i++)
dekS.push(dekN.splice(rInt(dekN.length),1));
buildN();
}

function rInt(n) {
return Math.floor(Math.random()*n);
}

function buildN() {
var i,j;
for (i=0;i<4;i++)
for (j=0;j<13;j++)
dekN[i*13+j]=i*13+j;
}

// card dealing functions

function clearTable() {
var i;
for (i=1;i<7;i++)
document.getElementById('h'+i).innerText='_ _';
for (i=1;i<6;i++)
document.getElementById('c'+i).innerText='_';
ch=false;cf=false;ct=false;cr=false; // hand, flop, turn, river cards dealt
}

function deal() {
var i;
shuffle();
hand=new Array(); // player's hands
clearTable();
for (i=0;i<6;i++) hand[i]=[dekS.pop()];
for (i=0;i<6;i++) hand[i].push(dekS.pop());
for (i=0;i<6;i++) {
cdTx='<span style="color:'+(hand[i][0]<26?'black':'red')+'">'+dekV[hand[i][0]]+'</span> ';
cdTx+='<span style="color:'+(hand[i][1]<26?'black':'red')+'">'+dekV[hand[i][1]]+'</span>';
document.getElementById('h'+(i+1)).innerHTML=cdTx;
}
ch=true;cf=false;ct=false;cr=false;
}

function flop() {
if (!ch || cf) return;
var i;
comm=new Array(); // community cards
for (i=0;i<3;i++) {
comm[i]=[dekS.pop()];
cdTx='<span style="color:'+(comm[i]<26?'black':'red')+'">'+dekV[comm[i]]+'</span> ';
document.getElementById('c'+(i+1)).innerHTML=cdTx;
}
cf=true;
}

function turn() {
if (!ch || !cf || ct) return;
comm[3]=[dekS.pop()];
cdTx='<span style="color:'+(comm[3]<26?'black':'red')+'">'+dekV[comm[3]]+'</span> ';
document.getElementById('c4').innerHTML=cdTx;
ct=true;
}

function river() {
if (!ch || !cf || !ct || cr) return;
comm[4]=[dekS.pop()];
cdTx='<span style="color:'+(comm[4]<26?'black':'red')+'">'+dekV[comm[4]]+'</span> ';
document.getElementById('c5').innerHTML=cdTx;
cr=true;
}

</script>
</html>